import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'

// TODO 由于外部用的时候是this.$store.state.user.userAge的写法而非this.$store.user.state.userAge
// TODO 这样可能会造成user是全局state下的一个JSON对象属性，然后userAge则是user对象里的属性【指不定Vuex的模块化其实就是这么实现的。。】
// TODO 所以这里规定导入的modules的store对象名后面必须加State以示区别【看以后vue会不会优化，这里也好可以改进，毕竟userState其实不准确】
// TODO 这里还是就用user吧，主要是userState确实名不符实，这里干脆理解成Vuex对模块化的实现其实就是将模块的state整个对象写入到全局state的某个属性
// TODO 如这里的user属性，所以全局state里不能再有名叫user的属性，否则应该会冲突？
import user from './modules/user'
import product from './modules/product'
import Vue from "vue";

// TODO 不要用getters，模块化时会产生比较大的不协调的写法
// 没法向VueRouter一样写到main.js里统一配置，vue规定了必须在创建Vuex.Store之前先执行Vue.use(Vuex)
Vue.use(Vuex)

// Vuex可以通过action执行一条操作从而实现类似$emit发布一条事件，然后getters里能够动态的获取到相关的变更，
// 从而在每个组件里定义不同的计算属性引用到对应的getters里的属性，实现类似$on的效果
const store = new Vuex.Store({
	state,
	mutations,
	actions,
	modules: {
		/*这里自己的规范写法要不写成'$user': user，这样既能解决命名冲突，也能解决不好区分是全局state里定义的属性还是注册的module*/
		'$user': user,
		'$product': product
	}
})

export default store